import { Button, Input } from 'antd'
import { useState, useEffect, } from 'react'
import "../../css/Dashboard.css"
import cating from "../../img/cat.webp"
//useState只能放在函数组件中，不能放在判断或者循环语句中
function Dashboard() {
  let [name, setName] = useState("");
  let [Password, setPassword] = useState('');
  const [count, setCount] = useState(0)

  //猫咪位置
  let [position, setPosition] = useState({ X: 0, Y: 0 });
  function moveMouse(e: any) {
    setPosition(
      {
        X : e.clientX,
        Y : e.clientY
      }
    )
  }
  useEffect(() => {
    window.document.addEventListener("moveMouseTo", moveMouse)
    return function cleanup() {
      window.document.removeEventListener("moveMouseTo", moveMouse) 
    }
  },[]);
  return ( 
    <div id={"dashboard"}>
      <div id={"use-State"}>
        <h1>Hook useState小练习</h1>
        <div>
          <Input type="text" placeholder={"账号"} value={name} onChange={e => setName(e.target.value)} />
        </div>
        <div>
          <Input type="password" placeholder={"密码"} value={Password} onChange={e => setPassword(e.target.value)} />
        </div>
        <Button onClick={e => alert("账号: " + name + " 密码：" + Password)}>
          提交
        </Button>
      </div>
      {/* useEffect在页面创建和更新的时候调用 */}
      <div id={"use-State"}>
        <h1>Hook useEffects 实现react生命周期 </h1>
        {count < 10 ? <Counter count={count}></Counter> : null}
        <Button onClick={e => setCount(count - 1)}>
          减一
        </Button>
        <Button onClick={e => setCount(count + 1)}>
          加一
        </Button>
      </div>

      <div id={"use-Effect"}>
        <h1> useEffect 移动的猫 </h1>
        <Cat position = {position}></Cat>
      </div>
    </div>

  )
}
function Counter(props: any) {
  useEffect(() => {
    return function cleanup() {
      //清理函数，数据改变以前去先执行、、用于订阅
    }
    //如果加一个空数据的话，就只注册一次didMount 和 didUnmount
    //数组里面可以放值的，这个值会被监听，当这个值发生改变的时候才会执行useEffect 和 cleanup
  }, [])
  return (
    <div>
      {props.count}
    </div>
  )
}
//猫咪组件
function Cat(props: any) {

  let style: any = {
    left: props.X,
    top: props.Y,
    position: "absolute"
  }
  return (
    <img src={cating} alt="猫" width="100" style={style} />
  )

}

export default Dashboard
